<template>
  <div id="screen-container" class="screen-container flex1">
          <div class="screen-header flex-row flex-center">
            <div class="title">智慧运维监控管理平台</div>
            <div class="header-btn">
              <div v-for="item in networks"
                   :key="item.value"
                   @click="selectNetwork(item.value)"
                   :class="{'header-btn-item-check': network === item.value}"
                   class="header-btn-item">
                {{item.label}}
              </div>
            </div>
            <div class="operate-btns flex-row flex-item">
              <i class="btn el-icon-data-board" @click="switchMode"></i>
              <i class="btn el-icon-setting" @click="openConfig"></i>
              <img v-if="showExit" class="btn" style="width: 22px" src="../../assets/screen/exit.png" @click="loginOut" alt="">
            </div>
          </div>
          <div class="screen-content flex-row">
            <div class="screen-side flex-column">
              <div class="flex1"></div>
              <div class="chart-container flex-column">
                <subtitle name="设备状态"></subtitle>
                <div class="chart-body flex-column">
                  <div class="warning-top-item warning-item">
                    <p class="waning-item-title">告警</p>
                    <div class="waning-item-body">
                      <img src="../../assets/screen/密接.png" alt="">
                      <span>{{ screenDevice.alarm }}个</span>
                    </div>
                  </div>
                  <div class="flex-row">
                    <div class="warning-bottom-item warning-item">
                      <p class="waning-item-title">正常</p>
                      <div class="waning-item-body">
                        <img src="../../assets/screen/密接.png" alt="">
                        <span>{{ screenDevice.normal }}个</span>
                      </div>
                    </div>
                    <div class="flex1"></div>
                    <div class="warning-bottom-item warning-item">
                      <p class="waning-item-title">故障</p>
                      <div class="waning-item-body">
                        <img src="../../assets/screen/密接.png" alt="">
                        <span>{{ screenDevice.fault }}个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex1"></div>
              <div class="chart-container flex-column">
                <subtitle name="告警状态"></subtitle>
                <gjzt ref="gjzt"></gjzt>
              </div>
              <div class="flex1"></div>
              <div class="chart-container flex-column">
                <subtitle name="待处理告警前10" @switch="switchClick('gjdqpm')" switchBtn :viewMode="viewMode.gjdqpm"></subtitle>
                <gjdqpm ref="gjdqpm"></gjdqpm>
              </div>
            </div>
            <div class="screen-center">
              <div class="center-top">
                <div class="center-top-item">
                  <img src="./../../assets/screen/摄像头.png" alt="">
                  <span>监控设备数</span>
                  <span class="num">{{ screenDevice.allDeviceCount }}</span>
                </div>
                <div class="center-top-item">
                  <img src="./../../assets/screen/摄像头(1).png" alt="">
                  <span>监控故障数</span>
                  <span class="num">{{ screenDevice.monitorFault }}</span>
                </div>
                <div class="center-top-item">
                  <img src="./../../assets/screen/摄像头(2).png" alt="">
                  <span>监控告警数</span>
                  <span class="num">{{ screenDevice.monitorAlarm }}</span>
                </div>
              </div>
              <zgdt ref="zgdt" :network="network"></zgdt>
            </div>
            <div class="screen-side flex-column">
              <div class="flex1"></div>
              <div class="chart-container">
                <subtitle name="一级待处理告警前5" @switch="switchClick('gjslpm')" switchBtn :viewMode="viewMode.gjslpm"></subtitle>
                <gjslpm ref="gjslpm"></gjslpm>
              </div>
              <div class="flex1"></div>
              <div class="chart-container">
                <subtitle name="故障分析率-告警处理率"></subtitle>
                <gjcll ref="gjcll"></gjcll>
              </div>
              <div class="flex1"></div>
              <div class="chart-container">
                <subtitle name="待分析故障前10" @switch="switchClick('gzdqpm')" switchBtn :viewMode="viewMode.gzdqpm"></subtitle>
                <gzdqpm ref="gzdqpm"></gzdqpm>
              </div>
            </div>
          </div>
    <config @load-page="pageLoad" ref="config"></config>
  </div>
</template>
<script>
import { networks } from '@/assets/dict'
import router from '@/router';
// import sidemenu from '@/components/menu.vue';
import subtitle from '@/components/subtitle.vue';
import gjdqpm from './echarts/gjdqpm';
import gjslpm from './echarts/gjslpm';
import gjcll from './echarts/gjcll';
import gzdqpm from './echarts/gzdqpm';
import gjzt from './echarts/gjzt';
import zgdt from './echarts/zgdt';
import config from './config'
export default {
  name: 'screen',
  components: {
    gjdqpm,
    gjslpm,
    gjcll,
    gzdqpm,
    gjzt,
    zgdt,
    // sidemenu,
    subtitle,
    config
  },
  data() {
    return {
      networks,
      network: 'JZW',
      screenDevice: {
        allDeviceCount: 0,
        normal: 0,
        alarm: 0,
        fault: 0
      },
      viewMode: {
        gjdqpm: 2,
        gjslpm: 2,
        gzdqpm: 2,
      }
    }
  },
  methods: {
    switchMode() {
      this.$refs.zgdt?.switchMode()
    },
    switchClick(type) {
      this.viewMode[type] = this.viewMode[type] === 1 ? 2 : 1
      this.$refs[type]?.getChartData({
        network: this.network,
        [type === 'gzdqpm' ? 'faultType' : 'alarmType']: this.viewMode[type]
      })
    },
    openConfig() {
      this.$refs.config.open()
    },
    loginOut() {
      this.$confirm('是否退出登录？').then(() => {
        window.location.href = `${window.location.origin}/login`
      }).catch(() => {
        console.log('cancel')
      })
    },
    pageLoad() {
      const network = this.network
      this.$refs.gjcll?.getChartData(this.network)
      this.$refs.gjdqpm?.getChartData({
        network,
        alarmType: this.viewMode.gjdqpm
      })
      this.$refs.gjslpm?.getChartData({
        network,
        alarmType: this.viewMode.gjslpm
      })
      this.$refs.gzdqpm?.getChartData({
        network,
        faultType: this.viewMode.gzdqpm
      })
      this.$refs.gjzt?.getChartData(this.network)
      this.getScreenDevice()
    },
    getScreenDevice() {
      this.$http.get('/dataView/getScreenDevice', {
        params: {
          network: this.network
        }
      }).then(res => {
        this.screenDevice = res
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取数据失败')
      })
    },
    selectNetwork(val) {
      this.network = val
      this.pageLoad()
    },
  },
  computed: {
    showExit() {
      return router.getRoutes().length <= 4
    }
  },
  mounted() {
    this.pageLoad()
  }
}
</script>
<style scoped lang="scss">
.screen-container {
  overflow: auto;
  background-color: #033c75;
  background-image: url("./imgs/bg1.png");
  .screen-header {
    position: relative;
    height: 60px;
    background-image: url("../../assets/screen/header.png");
    background-size: 100% 100%;
    .title {
      font-size: 28px;
      text-transform: uppercase;
      font-weight: 700;
      display: inline-block;
      background-image: linear-gradient(to bottom, #EAF2FC 0%,  #EAF2FC 45%, #1278DE 100%);
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: 0.2rem;
    }
    .header-btn {
      position: absolute;
      left: 3vh;
      top: 3vh;
      display: flex;
      .header-btn-item {
        width: 77px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        font-size: 12px;
        cursor:pointer;
        background-image: url("../../assets/screen/btn1.png");
        background-size: 100% 100%;
      }
      .header-btn-item-check {
        background-image: url("../../assets/screen/btn2.png");
      }
      .header-btn-item:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
  .screen-content {
    padding: 10px;
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
    .screen-side {
      width: 20vw;
      min-width: 320px;
      .chart-container {
        background: rgba(0,0,0,0.1);
        padding: 10px;
        padding-top: 5px;
        border-radius: 10px;
        margin: 5px 0;
        .warning-item {
          height: 96px;
          text-align: center;
          color: #ffffff;
          background-size: 100% 100%;
          margin-top:1vh;
          .waning-item-body {
            height: 9vh;
            line-height: 9vh;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              margin-left: 1vh;
              font-size: 22px;
              text-transform: uppercase;
              font-weight: 700;
              display: inline-block;
              background-image: linear-gradient(to bottom, #EAF2FC 0%,  #EAF2FC 30%, #FF6E76 100%);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
            }
          }
        }
        .warning-top-item {
          width: 100%;
          background-image: url("../../assets/screen/bg-item1.png");
          .waning-item-title {
            line-height: 23px;
          }
          .waning-item-body {
            height: 70px;
          }
        }
        .warning-bottom-item {
          width: 48%;
          background-image: url("../../assets/screen/bg-item.png");
          .waning-item-title {
            line-height: 42px;
          }
          .waning-item-body {
            height: 40px;
          }
        }
      }
    }
    .screen-center{
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      .center-top {
        position: absolute;
        top: 4vh;
        display: flex;
        z-index: 9;
        .center-top-item {
          width: 250px;
          height: 6vh;
          padding: 1vh 1vw;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          background: rgba(0,106,255,0.06);
          border: 1px solid rgba(0,106,255,0.25);
          color: #ffffff;
          img {
            margin-right: 1vh;
          }
          .num {
            margin-left: 1vh;
            font-size: 24px;
            text-transform: uppercase;
            display: inline-block;
            font-weight: bold;
            background-image: linear-gradient(to bottom, #EAF2FC 0%,  #EAF2FC 20%, #1278DE 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
        }

        .center-top-item:nth-child(2) {
          margin: 0 1vh;
          background: rgba(255,179,0,0.06);
          border: 1px solid rgba(255,196,0.25);
          .num {
            background-image: linear-gradient(to bottom, #EAF2FC 0%,  #EAF2FC 20%, #FFD814 100%);
          }
        }
        .center-top-item:nth-child(3) {
          background: rgba(255,0,0,0.06);
          border: 1px solid rgba(255,35,0,0.25);
          .num {
            background-image: linear-gradient(to bottom, #EAF2FC 0%,  #EAF2FC 20%, #E64141 100%);
          }
        }
      }
      .center-bottom {
        display: flex;
        position: absolute;
        bottom: 4vh;
        .center-bottom-item {
          width: 164px;
          height: 48px;
          display: flex;
          margin: 0 1vh;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-image: url("../../assets/screen/按钮.png");
          background-size: 100% 100%;
          cursor: pointer;
          color: #999999;
        }
      }
    }
  }
  .operate-btns {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    .btn {
      font-size: 20px;
      cursor: pointer;
      margin: 10px;
    }
  }
}
</style>